<template>
  <div class="score_verify">
    <div class="banner_text">
      <img src="../../../assets/img/modules/score/qy_8.png" alt=""> 职工教育网工会会员身份核验
    </div>
    <div class="title_text_span">
      <span>*</span> 完善本人信息将有助于更快完成认证
    </div>
    <van-cell-group>
      <van-field
          v-model="userData.username"
          label="用户名"
          input-align="right"
          placeholder="请输入用户名"
      />
      <van-field
          v-model="userData.phone"
          label="手机号"
          input-align="right"
          placeholder="请输入手机号"
      />
    </van-cell-group>
    <div class="title_text_span">
      请输入关键字并选择你所在的企业，若搜索结果没有你的企业，请手动输入企业全称
    </div>
    <van-cell :value="userData.firm" is-link @click="opencompanyModel">
      <template slot="title">
        <span class="custom-title">所在单位/企业</span>
      </template>
    </van-cell>
    <van-cell :value="userData.address" is-link @click="openAdressModel">
      <template slot="title">
        <span class="custom-title">所在行政区域</span>
      </template>
    </van-cell>
    <div class="footer_btn">
      <button :class="activeBtn?'wk_bg':'wk_bg active'" :disabled="activeBtn">
        <a v-if="activeBtn" href="javascript:;" @click="pageNext">下一步</a>
        <a v-else href="javascript:;">下一步</a>
      </button>
    </div>
    <!--单位选择-->
    <company-model ref="companyModel" @refreshDataList="getDataModel"></company-model>
    <!--单位所在地-->
    <adress-model ref="adressModel" @refreshDataList="getDataAdressModel"></adress-model>
  </div>
</template>
<script>
import companyModel from '@/components/company-model'
import adressModel from '@/components/adress-model'
import { isMobile } from '@/utils/validate'
export default {
  name: 'score_verify',
  components: {
    companyModel,
    adressModel
  },
  data () {
    return {
      activeBtn: false,
      userData: {
        username: '',
        phone: '',
        address: '请选择行政区域',
        region_id: -1,
        firm: '请输入单位关键字'
      }
    }
  },
  props: {},
  watch: {
    userData: {
      /* wf_Huang 2019/8/21 0021 监听是否输入内容 */
      handler (newname, oldname) {
        if (this.userData.username !== '' &&
          this.userData.phone !== '' &&
          this.userData.address !== '请选择行政区域' &&
          this.userData.firm !== '请输入单位关键字') {
          this.activeBtn = true
        } else {
          this.activeBtn = false
        }
      },
      deep: true
    }
  },
  methods: {
    /* wf_Huang 2019/8/21 0021 下一页 */
    pageNext () {
      if (isMobile(this.userData.phone)) {
        this.$store.state.score.memberData.name = this.userData.username
        this.$store.state.score.memberData.phone = this.userData.phone
        this.$store.state.score.memberData.union_name = this.userData.address
        this.$store.state.score.memberData.region_id = this.userData.region_id
        this.$store.state.score.memberData.company_name = this.userData.firm
        localStorage.setItem('stateData', JSON.stringify(this.$store.state))
        this.$router.push({ path: '/score-voucher' })
      } else {
        this.$toast('手机号格式有误~')
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 9:20
     *@function  获取选择地区弹窗返回的数据
     *****************************************/
    getDataModel (val) {
      this.userData.firm = val
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 9:44
     *@function  打开企业搜索弹窗
     *****************************************/
    opencompanyModel () {
      this.$nextTick(() => {
        this.$refs.companyModel.init()
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 11:27
     *@function  打开选择地区弹窗
     *****************************************/
    openAdressModel () {
      this.$nextTick(() => {
        this.$refs.adressModel.init()
      })
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/9 0009 11:24
     *@function  获取地区数据
     *****************************************/
    getDataAdressModel (data) {
      this.userData.address = data.address
      this.userData.region_id = data.region_id
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    /* wf_Huang 2019/8/21 0021 赋值已有参数 */
    this.userData.username = this.$store.state.score.memberData.name
    this.userData.phone = this.$store.state.score.memberData.phone
    this.userData.address = this.$store.state.score.memberData.region_pnames || '请选择行政区域'
    this.userData.region_id = this.$store.state.score.memberData.region_id
    this.userData.firm = this.$store.state.score.memberData.company_name || '请输入单位关键字'
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .score_verify {
    .banner_text{
      height: 110px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: center;
      background: #FEEFF0;
      font-size: 30px;
      color: #FF0000;
      img{
        width: 38px;
        height: 38px;
        margin-right: 10px;
      }
    }
    .title_text_span{
      padding: 20px 30px;
      display: flex;
      align-items: center;
      font-size: 26px;
      line-height: 35px;
      color: #c8c9cc;
      margin-top: 20px;
      margin-bottom: 60px;
      background-image: linear-gradient(-270deg, #FBFBFB 0%, #F6F6F6 100%);
      span{
        color: #FA3A51;
      }
    }
    .footer_btn{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background-color: #ffffff;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      padding: 12px 45px;
      .wk_bg{
        background: #FA3A51;
        border-radius: 4px;
        height: 86px;
        width: 100%;
        display: flex;
        justify-items: center;
        justify-content: center;
        align-content: center;
        align-items: center;
        border: 0;
        a{
          font-size: 32px;
          color: #FFFFFF;
          letter-spacing: 0;
          width: 100%;
          line-height: 40px;
          text-align: center;
          &:nth-child(2){
            border-left: 1px solid #ffffff;
          }
        }
      }
      .active{
        background: #FFBFC7;
      }
    }
  }
</style>
